<template>
	<view class="coupon">
		<view class="coupon-header u-flex-between" @click="$navigateTo('/subPackages/coupon-package/index')">
			<view class="header-left u-flex">
				<view class="header-title">会员省钱包</view>
				<view class="header-text">（跨境除外）</view>
			</view>
			<view class="header-right u-flex">
				<view class="more">更多</view>
				<u-icon name="arrow-right" size="14"></u-icon>
			</view>
		</view>
		<view class="content u-flex">
			<view class="li" v-for="(item,index) in couponList" :key="index"
				@click.stop="$navigateTo('/subPackages/coupon-package/detail?id='+item.id)">
				<view class="li-header u-flex-center u-flex-col u-col-center"
					:style="{backgroundImage:`url(${$getImageUrl(userCouponBase)})`}">
					<view class="li-value u-flex u-col-end">
						<span style="font-size: 32rpx;">价值￥</span>
						<span style="font-size: 40rpx;line-height: 1;">{{item.cost_price}}</span>
					</view>
					<view class="li-num">{{item.coupon_total}}张</view>
				</view>
				<view class="li-footer u-flex-between">
					<view class="footer-left u-flex">
						<view class="price u-flex u-col-end">
							<span style="font-size: 24rpx;">￥</span>
							<span style="font-size: 36rpx;line-height: 1;">{{item.price}}</span>
						</view>
					</view>
					<view :class="[item.is_limit_stock == 1 && item.remainder == 0 ?'li-button-active':'li-button']">
						{{item.is_limit_stock == 1 && item.remainder == 0 ?'售罄':'购买'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userCouponBase: '/user_client/image/userCouponBase.png',
			}
		},
		props: {
			couponList: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon {
		padding: 40rpx 0 40rpx 20rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 24rpx;

		.coupon-header {
			.header-left {
				.header-title {
					font-size: 32rpx;
					color: #CC242B;
				}

				.header-text {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.6);
				}
			}

			.header-right {
				.more {
					font-size: 24rpx;
					color: #999999;
					padding-right: 2rpx;
				}
			}
		}

		.content {
			padding-top: 40rpx;
			overflow-x: auto;

			.li {
				width: 248rpx;
				margin-right: 12rpx;

				.li-header {
					width: 248rpx;
					height: 164rpx;
					background-size: cover;
					background-repeat: no-repeat;

					.li-value {
						color: #FFFFFF;
					}

					.li-num {
						font-size: 36rpx;
						color: #FFFFFF;
						padding-top: 15rpx;
					}
				}

				.li-footer {
					padding-top: 14rpx;

					.footer-left {
						.price {
							color: #F21111;
						}
					}

					.li-button {
						padding: 12rpx 20rpx;
						box-sizing: border-box;
						background: linear-gradient(270deg, #FC1A00 0%, #FF9387 100%);
						border-radius: 4rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 1;
						flex-shrink: 0;
					}

					.li-button-active {
						padding: 12rpx 20rpx;
						box-sizing: border-box;
						background: #CACACA;
						border-radius: 4rpx;
						font-size: 32rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 1;
						flex-shrink: 0;
					}
				}
			}
		}
	}
</style>